<template>
  <view class="ver-layout">
    <!-- 顶部布局 -->
    <view class="top-layout hor-layout-side-center">
      <view class="class-name">{{ classObj.class_title }}</view>
      <view class="class-name">{{ classObj.student_total }}人</view>
    </view>
    <!-- 学生列表 -->
    <view class="student-list-view">
      <block v-if="studentList.length>0">
        <view v-for="(item,index) in studentList" :key="index" class="student-item hor-layout-center"
              @click="toStudentInfo(item)">
          <image class="student-icon"
                 :src="item.student_avatar?item.student_avatar:ic_teacher_student_default1"></image>
          <view class="student-name">{{ item.student_name }}</view>
        </view>
      </block>
      <view v-else class="student-no-data">暂无学生</view>
    </view>
    <!-- 添加按钮   -->
    <view class="add-student-btn" @click="toAddStudentPage">
      <i class="iconfont add-student-icon">&#xe601;</i>
    </view>
  </view>
</template>

<script>
import {inputClassStu, studentInfo} from "@/router.js"
import {ClassStudentListApi} from "@/api/enterStudent.js"

let ic_teacher_student_default1 = require("@/static/home/ic_student_default1.png")
let engine = new ClassStudentListApi()
export default {
  name: "studentList",
  data() {
    return {
      ic_teacher_student_default1,
      classObj: {},
      studentList: [{}]
    }
  },
  onLoad(options) {
    this.classObj = options
    this.getClassStudents()
  },
  methods: {
    toStudentInfo(item) {
      let {class_id, class_title} = this.classObj
      this.$u.route({url: studentInfo, params: {...item, class_id, class_title}})
    },
    toAddStudentPage() {
      let {class_major, class_title, start_time, course_title, teacher_name} = this.classObj
      let classObj = {
        class_name: class_title,
        major: class_major,
        start_time: start_time,
        course: course_title,
        teacher: teacher_name
      }
      this.$u.route({url: inputClassStu, params: {...classObj, ...this.classObj}})
    },
    getClassStudents() {
      engine.getClassStudents(this.classObj.class_id).then(res => {
        if (res.data.student_list)
          this.studentList = res.data.student_list
      }).catch(err => {
        this.$u.toast(err.message);
      })
    }
  }
}
</script>

<style scoped>
.top-layout {
  position: fixed;
  width: 100%;
  height: 37px;
  padding: 12px;
  background: white;
  border-bottom: 1px solid #E5E5E5;
}

.class-name {
  font-size: 14px;
  color: #333333;
}

.student-list-view {
  margin-top: 37px;
}

.student-item {
  margin: 0px 12px;
  padding: 12px 0px;
  border-bottom: 1px solid #E5E5E5;
}

.student-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.student-name {
  margin-left: 12px;
  font-size: 14px;
  color: #333333;
}

.add-student-btn {
  position: fixed;
  bottom: 33px;
  right: 13px;
  width: 58px;
  height: 58px;
  line-height: 58px;
  text-align: center;
  background: #6079F5;
  border-radius: 50%;
}

.add-student-icon {
  color: white;
  font-size: 30px;
}

.student-no-data {
  width: 100%;
  height: 200px;
  line-height: 200px;
  text-align: center;
  color: grey;
}
</style>
